<template>
  <view class="order-detail">
    <!-- 基本信息 -->
    <view class="base-infor">
      <view class="title">
        <view class="bar"></view>
        <view class="name">基本信息</view>
      </view>
      <view class="infor-container">
        <view
          class="infor-list"
          v-if="
            orderDetail.requestOrderInfo &&
            Object.keys(orderDetail.requestOrderInfo).length > 0
          "
        >
          <view class="infor-title">
            <u--image
              class="infor-image"
              :showLoading="true"
              :src="productIcon"
              width="32rpx"
              height="32rpx"
            ></u--image>
            <view class="infor-name">产品名称</view>
          </view>
          <view class="time">{{
            orderDetail.requestOrderInfo.requestOrderCategoryName
          }}</view>
        </view>
        <view
          class="infor-list"
          v-if="
            orderDetail.requestOrderInfo &&
            Object.keys(orderDetail.requestOrderInfo).length > 0
          "
        >
          <view class="infor-title">
            <u--image
              class="infor-image"
              :showLoading="true"
              :src="timeIcon"
              width="32rpx"
              height="32rpx"
            ></u--image>
            <view class="infor-name">预约时间</view>
          </view>
          <view class="time">{{
            orderDetail.requestOrderInfo.serviceTime
              ? formatTimes(
                  orderDetail.requestOrderInfo.serviceTime,
                  "YYYY/MM/DD hh:mm:ss"
                )
              : ""
          }}</view>
        </view>
        <view
          class="infor-list"
          v-if="
            orderDetail.userInfo && Object.keys(orderDetail.userInfo).length > 0
          "
        >
          <view class="infor-title">
            <u--image
              class="infor-image"
              :showLoading="true"
              :src="addressIcon"
              width="32rpx"
              height="32rpx"
            ></u--image>
            <view class="infor-name">维修地址</view>
          </view>
          <view class="time">{{ orderDetail.userInfo.userAddress }}</view>
        </view>
        <view
          class="infor-list"
          v-if="
            orderDetail.userInfo && Object.keys(orderDetail.userInfo).length > 0
          "
        >
          <view class="infor-title">
            <u--image
              class="infor-image"
              :showLoading="true"
              :src="userIcon"
              width="32rpx"
              height="32rpx"
            ></u--image>
            <view class="infor-name infor-call">
              <view class="name">{{ orderDetail.userInfo.userName }}</view>
              <u--image
                :showLoading="true"
                :src="callPhoneIcon"
                width="48rpx"
                height="48rpx"
                @click="callUser(orderDetail.userInfo.userPhone)"
              ></u--image>
            </view>
          </view>
          <view class="time">{{ orderDetail.userInfo.userPhone }}</view>
        </view>
      </view>
    </view>
    <!-- 产品信息 -->
    <!-- <view class="base-infor">
      <view class="title">
        <view class="bar"></view>
        <view class="name">产品信息</view>
      </view>
      <view
        class="infor-container"
        v-if="
          orderDetail.requestOrderInfo &&
          Object.keys(orderDetail.requestOrderInfo).length > 0
        "
      >
        <view class="infor-list">
          <view class="infor-title">
            <u--image
              class="infor-image"
              :showLoading="true"
              :src="productIcon"
              width="32rpx"
              height="32rpx"
            ></u--image>
            <view class="infor-name">产品名称</view>
          </view>
          <view class="time">{{
            orderDetail.requestOrderInfo.orderCategoryName
          }}</view>
        </view>
        <view class="infor-list">
          <view class="infor-title">
            <u--image
              class="infor-image"
              :showLoading="true"
              :src="productPicIcon"
              width="32rpx"
              height="32rpx"
            ></u--image>
            <view class="infor-name">产品图片</view>
          </view>
          <view class="pic-images">
            <u--image
              class="images-list"
              :showLoading="true"
              width="192rpx"
              height="192rpx"
              radius="6"
              src="https://cdn.uviewui.com/uview/album/1.jpg"
            ></u--image>
            <u--image
              class="images-list"
              :showLoading="true"
              width="192rpx"
              height="192rpx"
              radius="6"
              src="https://cdn.uviewui.com/uview/album/1.jpg"
            ></u--image>
          </view>
        </view>
        <view class="infor-list">
          <view class="infor-title">
            <u--image
              class="infor-image"
              :showLoading="true"
              :src="textDescriptionIcon"
              width="32rpx"
              height="32rpx"
            ></u--image>
            <view class="infor-name">文字描述</view>
          </view>
          <view class="time">空调不制冷、空调漏水</view>
        </view>
      </view>
    </view> -->
    <!-- 订单信息 -->
    <view class="base-infor">
      <view class="title">
        <view class="bar"></view>
        <view class="name">订单信息</view>
      </view>
      <view
        class="infor-container"
        v-if="
          orderDetail.requestOrderInfo &&
          Object.keys(orderDetail.requestOrderInfo).length > 0
        "
      >
        <view class="infor-list">
          <view class="infor-title">
            <u--image
              class="infor-image"
              :showLoading="true"
              :src="productIcon"
              width="32rpx"
              height="32rpx"
            ></u--image>
            <view class="infor-name">订单号码</view>
          </view>
          <view class="time order-num">
            <text class="copy-text">{{ orderDetail.orderInfo.orderNo }}</text>
            <text class="copy-btn" @click="copy(orderDetail.orderInfo.orderNo)"
              >复制</text
            ></view
          >
        </view>
        <view class="infor-list">
          <view class="infor-title">
            <u--image
              class="infor-image"
              :showLoading="true"
              :src="timeIcon"
              width="32rpx"
              height="32rpx"
            ></u--image>
            <view class="infor-name">下单时间</view>
          </view>
          <view class="time">{{
            orderDetail.orderInfo.createTime
              ? formatTimes(
                  orderDetail.orderInfo.createTime,
                  "YYYY/MM/DD hh:mm:ss"
                )
              : ""
          }}</view>
        </view>
        <view class="infor-list">
          <view class="infor-title">
            <u--image
              class="infor-image"
              :showLoading="true"
              :src="textDescriptionIcon"
              width="32rpx"
              height="32rpx"
            ></u--image>
            <view class="infor-name">总金额</view>
          </view>
          <view class="time price">{{
            orderDetail.requestOrderInfo.requestOrderPrice
          }}</view>
        </view>
      </view>
    </view>
    <!-- 产品信息 -->
    <view class="base-infor">
      <view class="title">
        <view class="bar"></view>
        <view class="name">服务信息</view>
      </view>
      <view
        class="infor-container"
        v-if="
          orderDetail.orderInfo && Object.keys(orderDetail.orderInfo).length > 0
        "
      >
        <view class="infor-list">
          <view class="infor-title">
            <u--image
              class="infor-image"
              :showLoading="true"
              :src="timeIcon"
              width="32rpx"
              height="32rpx"
            ></u--image>
            <view class="infor-name">抵达时间</view>
          </view>
          <view class="time">{{
            orderDetail.orderInfo.signTime
              ? formatTimes(
                  orderDetail.orderInfo.signTime,
                  "YYYY/MM/DD hh:mm:ss"
                )
              : ""
          }}</view>
        </view>
        <view class="infor-list">
          <view class="infor-title">
            <u--image
              class="infor-image"
              :showLoading="true"
              :src="productPicIcon"
              width="32rpx"
              height="32rpx"
            ></u--image>
            <view class="infor-name">施工图片</view>
          </view>
          <view
            class="pic-images"
            v-if="orderDetail.attachInfo && orderDetail.attachInfo.length > 0"
          >
            <u--image
              class="images-list"
              :showLoading="true"
              width="192rpx"
              height="192rpx"
              radius="6"
              v-for="(item, index) in orderDetail.attachInfo"
              :key="index"
              :src="item.url"
            ></u--image>
          </view>
          <view class="infor-list">
            <view class="infor-title">
              <u--image
                class="infor-image"
                :showLoading="true"
                :src="timeIcon"
                width="32rpx"
                height="32rpx"
              ></u--image>
              <view class="infor-name">完成时间</view>
            </view>
            <view class="time">{{
              orderDetail.orderInfo.finishTime
                ? formatTimes(
                    orderDetail.orderInfo.finishTime,
                    "YYYY/MM/DD hh:mm:ss"
                  )
                : ""
            }}</view>
          </view>
          <!-- <view class="pic-images" v-else>
            <Upload class="upload-list" @getUpLoadImage="getUpLoadImageBefore">
              <view class="upload-file">
                <u-icon
                  name="plus-circle-fill"
                  color="#000000"
                  size="24"
                  class="icon"
                ></u-icon>
                <view class="title">施工前</view>
              </view>
            </Upload>
            <Upload class="upload-list" @getUpLoadImageIng="getUpLoadImageIng">
              <view class="upload-file">
                <u-icon
                  name="plus-circle-fill"
                  color="#000000"
                  size="24"
                  class="icon"
                ></u-icon>
                <view class="title">施工中</view>
              </view>
            </Upload>
            <Upload
              class="upload-list"
              @getUpLoadImageAfter="getUpLoadImageAfter"
            >
              <view class="upload-file">
                <u-icon
                  name="plus-circle-fill"
                  color="#000000"
                  size="24"
                  class="icon"
                ></u-icon>
                <view class="title">施工后</view>
              </view>
            </Upload>
          </view> -->
        </view>
      </view>
    </view>
    <view
      class="bottom-btn"
      v-if="
        orderDetail.orderInfo && Object.keys(orderDetail.orderInfo).length > 0
      "
    >
      <u-button
        type="primary"
        class="btn"
        text="抵达确认"
        :disabled="orderDetail.orderInfo.status !== 10"
        @click="showConfirmArrivalDialog()"
      ></u-button>
      <u-button
        type="primary"
        class="btn"
        text="完成订单"
        :disabled="orderDetail.orderInfo.status !== 20"
        @click="completeOrder()"
      ></u-button>
    </view>
    <u-modal
      width="460rpx"
      :show="showModel"
      :title="title"
      :content="content"
      :showCancelButton="true"
      @confirm="confirm"
      @cancel="cancel"
    ></u-modal>
  </view>
</template>

<script>
// 静态资源图片
import timeIcon from "@/static/iconImages/time-icon.png";
import addressIcon from "@/static/iconImages/address-icon.png";
import userIcon from "@/static/iconImages/user-icon.png";
import productIcon from "@/static/iconImages/product-icon.png";
import productPicIcon from "@/static/iconImages/product-pic-icon.png";
import textDescriptionIcon from "@/static/iconImages/text-description-icon.png";
import callPhoneIcon from "@/static/iconImages/call-phone-icon.png";
import Upload from "@/components/upload/index.vue";
import { getOrderDetail, orderSign, orderFinish } from "@/api/order";
import { formatTimes } from "@/utils/index";
export default {
  components: { Upload },
  data() {
    return {
      formatTimes,
      timeIcon,
      addressIcon,
      userIcon,
      productIcon,
      productPicIcon,
      textDescriptionIcon,
      callPhoneIcon,
      orderDetail: {},
      showModel: false,
      title: "提示",
      content: "",
      orderNo: "",
      modelType: "",
    };
  },
  onLoad: function (option) {
    this.orderNo = option.orderNo;
    this.getOrderDetail(option.orderNo);
  },
  methods: {
    // 获取订单详情
    async getOrderDetail(orderNo) {
      try {
        const res = await getOrderDetail(orderNo);
        this.orderDetail = { ...res.data };
      } catch (error) {
        console.log(error);
      }
    },
    // 复制订单
    copy(value) {
      uni.setClipboardData({
        data: value, //被复制的内容
        success: () => {
          //复制成功的回调函数
          wx.showToast({
            title: "复制成功",
            icon: "none",
            duration: 2000,
          });
        },
      });
    },
    // 拨打电话
    callUser(phone) {
      uni.makePhoneCall({
        phoneNumber: phone,
        success: function () {
          console.log("拨打电话成功");
        },
        fail() {
          console.log("打电话失败了");
        },
      });
    },
    // 确认抵达
    showConfirmArrivalDialog() {
      this.showModel = true;
      this.title = "确认抵达？";
      this.content = "确认将无法取消哦！";
      this.modelType = "arrive";
    },
    // 完成订单
    async completeOrder() {
      const res = await getOrderDetail(this.orderNo);
      if (this.orderDetail.attachInfo.length <= 0) {
        return wx.showToast({
          title: "请先上传施工图片！",
          icon: "none",
          duration: 2000,
        });
      }
      this.showModel = true;
      this.title = "确定完成订单？";
      this.content = "确认将无法取消哦！";
      this.modelType = "completeOrder";
    },
    //关闭确认model
    cancel() {
      this.showModel = false;
    },
    // 点确认model
    async confirm() {
      // modelType为 completeOrder 为完成订单功能
      // modelType为 arrive 为确认抵达功能
      if (this.modelType === "completeOrder") {
        // 完成订单
        try {
          await orderFinish({ orderNo: this.orderNo });
          wx.showToast({
            title: "成功！",
            icon: "none",
            duration: 2000,
          });
          this.goBack();
        } catch (error) {
          wx.showToast({
            title: "失败",
            icon: "none",
            duration: 2000,
          });
        }
        this.cancel();
      } else {
        // 确认抵达
        try {
          await orderSign({ orderNo: this.orderNo });
          wx.showToast({
            title: "成功！",
            icon: "none",
            duration: 2000,
          });
        } catch (error) {
          wx.showToast({
            title: "失败",
            icon: "none",
            duration: 2000,
          });
        }
        this.getOrderDetail(this.orderNo);
        this.cancel();
      }
    },
    //上一页页面实例
    goBack() {
      let pages = getCurrentPages(); // 当前页面
      console.log(pages);
      let beforePage = pages[pages.length - 2]; // 上一页
      console.log(beforePage);
      uni.navigateBack({
        success: function () {
          beforePage.$vm.loadOrderList();
          console.log("返回成功!");
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #f5f6fa;
}
.order-detail {
  padding-bottom: 20rpx;
  .base-infor {
    padding: 20rpx 0;
    background: #ffffff;
    border-radius: 16rpx;
    margin: 20rpx 20rpx 0 20rpx;
    .title {
      display: flex;
      .bar {
        width: 10rpx;
        height: 46rpx;
        background: #697c99;
        border-radius: 0rpx 6rpx 6rpx 0rpx;
      }
      .name {
        font-size: 36rpx;
        font-family: Source Han Sans CN-Medium, Source Han Sans CN;
        font-weight: 500;
        color: #000000;
        line-height: 46rpx;
        margin-left: 22rpx;
      }
    }
    .infor-container {
      padding: 0 30rpx;
      .infor-list {
        margin-top: 34rpx;
        .infor-title {
          display: flex;
          .infor-image {
            margin-top: 7rpx;
          }
          .infor-name {
            font-size: 32rpx;
            font-family: Source Han Sans CN-Medium, Source Han Sans CN;
            font-weight: 500;
            color: #000000;
            line-height: 44rpx;
            margin-left: 10rpx;
          }
          .infor-call {
            display: flex;
            justify-content: space-between;
            width: 100%;
            .name {
              flex: 1;
            }
          }
        }
        .time {
          font-size: 28rpx;
          font-family: Source Han Sans CN-Regular, Source Han Sans CN;
          font-weight: 400;
          color: #545454;
          line-height: 42rpx;
          padding: 0 42rpx;
          margin-top: 10rpx;
        }
        .order-num {
          display: flex;
          justify-content: space-between;
          .copy-text {
            flex: 1;
          }
          .copy-btn {
            width: 80rpx;
            height: 38rpx;
            background: #ffffff;
            border-radius: 1110rpx 1110rpx 1110rpx 1110rpx;
            border: 2rpx solid #ededed;
            text-align: center;
            line-height: 38rpx;
            font-size: 24rpx;
            font-family: Source Han Sans CN-Regular, Source Han Sans CN;
            font-weight: 400;
            color: #9d9d9d;
          }
        }
        .price {
          font-size: 32rpx;
          font-family: Source Han Sans CN-Medium, Source Han Sans CN;
          font-weight: 500;
          color: #ef6d44;
          line-height: 50rpx;
          &:before {
            content: "¥";
            font-size: 20rpx;
            font-weight: normal;
          }
        }
        .pic-images {
          display: flex;
          overflow: hidden;
          overflow-x: auto;
          white-space: nowrap;
          margin-top: 20rpx;
          .images-list {
            margin: 0 10rpx 10rpx 0;
            border: 1rpx solid #9d9d9d;
            border-radius: 6rpx;
          }
          .upload-list {
            margin-right: 20rpx;
            .upload-file {
              width: 192rpx;
              height: 192rpx;
              background: #fafafa;
              border: 1rpx solid #d9d9d9;
              text-align: center;
              display: flex;
              flex-direction: column;
              align-items: center;
              border-radius: 12rpx;
              overflow: hidden;
              .icon {
                margin-top: 60rpx;
              }
              .title {
                font-size: 26rpx;
                font-family: Source Han Sans CN-Regular, Source Han Sans CN;
                font-weight: 400;
                color: #12110e;
                line-height: 60rpx;
              }
            }
          }
        }
      }
    }
  }
  .bottom-btn {
    margin: 20rpx 20rpx 0 20rpx;
    display: flex;
    .btn {
      width: 45%;
    }
  }
}
</style>
